.root {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  inline-size: 100%;
  block-size: var(--vkui_docs--navbar-height);
  color: var(--vkui--color_text_primary);
  background-color: var(--vkui--color_background_content);
  border-block-end: var(--vkui--size_border--regular) solid
    var(--vkui_docs--color_stroke_separator_secondary);
  box-shadow: 0 8px 30px 0 rgb(0, 0, 0, 0.04);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-inline-size: var(--vkui_docs--max-width);
  padding-block: var(--vkui--spacing_size_m);
  padding-inline: var(--vkui--spacing_size_m);
  margin-inline: auto;
}

@media (--viewWidth-desktopPlus) {
  .navbar {
    padding-block: var(--vkui--spacing_size_xl);
    padding-inline: var(--vkui--spacing_size_2xl);
  }
}

.extraContent {
  display: flex;
  align-items: center;
}

/* stylelint-disable-next-line selector-max-universal */
.extraContent > *:not(:first-child) {
  margin-inline-start: var(--vkui--spacing_size_m);
}

@media (--viewWidth-tabletMinus) {
  .links {
    display: none;
  }
}
@media (--viewWidth-tablet) {
  .links {
    display: none;
  }
}

.separator.separator {
  margin-inline-end: var(--vkui--spacing_size_m);
  color: var(--vkui_docs--color_stroke_separator_secondary);
}

.logo {
  color: var(--vkui--color_text_primary);
}

.menuButton {
  margin-inline-end: var(--vkui--spacing_size_m);
}

@media (--viewWidth-desktopPlus) {
  .menuButton {
    display: none;
  }
}

.menuIcon {
  box-sizing: initial;
}

.versions {
  display: none;
}

@media (--viewWidth-desktopPlus) {
  .versions {
    display: block;
    margin-inline-start: var(--vkui--spacing_size_xl);
  }
}
